<template>
  <view class="page_bg page_min_height">
    <!-- 搜索栏 -->
    <view class="flex justify-between items-center p-12 bg-white">
      <view class="flex-1 flex items-center px-12 bg-gray-100 rounded-full">
        <uni-icons type="search" size="32rpx" />
        <view class="flex-1">
          <uni-easyinput
            v-model="searchValue"
            type="text"
            :inputBorder="false"
            placeholderStyle="color: #999;"
            :styles="{ backgroundColor: '#f6f3f4' }"
            placeholder="请输入关键字"
            @confirm="onSearch"
          />
        </view>
      </view>
      <view class="px-12" @click="onSearch">搜索</view>
    </view>
    <view class="flex gap-x-12 mt-12">
      <view class="w-120 h-[80vh] bg-white text-center rounded-tr-md rounded-br-md overflow-y-auto">
        <view v-if="typeLoading" class="pt-42">
          <view>
            <div
              class="mx-auto animate-spin rounded-full h-24 w-24 border-solid border-t-2 border-b-2 border-blue-500"
            ></div>
            <div class="mt-20 text-center text-blue-500">加载中...</div>
          </view>
        </view>
        <template v-else>
          <view
            v-for="(title, key) in regulationTypes"
            :key="key"
            class="py-12"
            :class="{ 'bg-blue-500 text-white': key === selectType }"
            @click="onSelect(key)"
          >
            {{ title }}
          </view>
        </template>
      </view>
      <view class="flex-1 h-[80vh] p-12 bg-white rounded-tl-md rounded-bl-md overflow-y-auto">
        <view v-if="listLoading" class="py-30">
          <view>
            <div
              class="mx-auto animate-spin rounded-full h-24 w-24 border-solid border-t-2 border-b-2 border-blue-500"
            ></div>
            <div class="mt-20 text-center text-blue-500">加载中...</div>
          </view>
        </view>
        <template v-else>
          <template v-if="regulationList.length">
            <view v-for="item in regulationList" :key="item.id" class="mb-12" @click="onDetail(item.id)">
              {{ item.title }}
            </view>
          </template>
          <EmptyData v-else />
        </template>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getRegulationTypesApi, getRegulationListApi } from '@/api/regulation';
import { usePage } from '@/utils/usePublic';
import { debounce } from '@/utils/utils';

const searchValue = ref('');
const typeLoading = ref(true);
const regulationTypes = ref({});
const selectType = ref('');
const listLoading = ref(true);
const regulationList = ref([]);
const pageParams = usePage();

onLoad(async () => {
  const { code, data } = await getRegulationTypesApi();
  typeLoading.value = false;
  if (code === 200) {
    regulationTypes.value = data;
    selectType.value = Object.keys(data)[0];
  }
  getRegulationList();
});

function onSelect(key) {
  selectType.value = key;
  getRegulationList();
}

async function getRegulationList() {
  listLoading.value = true;
  const { code, data } = await getRegulationListApi({
    ...pageParams,
    type: selectType.value,
  });
  listLoading.value = false;
  if (code === 200) {
    regulationList.value = data.list;
  }
}
// 详情
function onDetail(id) {
  uni.navigateTo({
    url: `/pages/regulation/detail?id=${id}`,
  });
}
// 搜索
const onSearch = debounce(function () {
  if (!searchValue.value) {
    uni.showToast({
      title: '请输入关键字',
      icon: 'none',
    });
    return;
  }
  uni.navigateTo({
    url: `/pages/regulation/search?keyword=${searchValue.value}`,
  });
});
</script>
